<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="title-section">
      <text class="main-title">满意率统计</text>
      <text class="sub-title">各维度评价分布统计及占比</text>
    </view>


    <!-- 授权按钮：仅在微信内时显示 -->
    <view v-if="isWechat" class="auth-btn-container">
      <button
          class="auth-btn"
          @click="handleSubscribeAuth"
      >
        我要进行评价
      </button>
    </view>

    <!-- 统计内容区域 -->
    <view class="stats-container">
      <!-- 客服响应效率 -->
      <view class="stats-item">
        <text class="stats-title">1. 客服响应效率</text>
        <view class="chart-container">
          <view v-for="(item, index) in efficiencyStats" :key="index" class="chart-bar-item">
            <view class="bar-label">
              <text class="label-text">{{ item.label }}</text>
            </view>
            <view class="bar-wrapper">
              <view
                  class="bar-fill"
                  :style="{ width: item.percentage + '%', backgroundColor: getBarColor(index) }"
              ></view>
            </view>
            <view class="bar-percentage">
              <text class="percentage-text">{{ item.percentage }}%</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 上门服务态度 -->
      <view class="stats-item">
        <text class="stats-title">2. 上门服务态度</text>
        <view class="chart-container">
          <view v-for="(item, index) in attitudeStats" :key="index" class="chart-bar-item">
            <view class="bar-label">
              <text class="label-text">{{ item.label }}</text>
            </view>
            <view class="bar-wrapper">
              <view
                  class="bar-fill"
                  :style="{ width: item.percentage + '%', backgroundColor: getBarColor(index) }"
              ></view>
            </view>
            <view class="bar-percentage">
              <text class="percentage-text">{{ item.percentage }}%</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 员工专业能力 -->
      <view class="stats-item">
        <text class="stats-title">3. 员工专业能力</text>
        <view class="chart-container">
          <view v-for="(item, index) in abilityStats" :key="index" class="chart-bar-item">
            <view class="bar-label">
              <text class="label-text">{{ item.label }}</text>
            </view>
            <view class="bar-wrapper">
              <view
                  class="bar-fill"
                  :style="{ width: item.percentage + '%', backgroundColor: getBarColor(index) }"
              ></view>
            </view>
            <view class="bar-percentage">
              <text class="percentage-text">{{ item.percentage }}%</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 员工廉洁行为 -->
      <view class="stats-item">
        <text class="stats-title">4. 员工廉洁行为</text>
        <view class="chart-container">
          <view v-for="(item, index) in behaviorStats" :key="index" class="chart-bar-item">
            <view class="bar-label">
              <text class="label-text">{{ item.label }}</text>
            </view>
            <view class="bar-wrapper">
              <view
                  class="bar-fill"
                  :style="{ width: item.percentage + '%', backgroundColor: getBarColor(index) }"
              ></view>
            </view>
            <view class="bar-percentage">
              <text class="percentage-text">{{ item.percentage }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 统计信息 -->
    <!--    <view class="summary-info">-->
    <!--      <text class="summary-text">统计样本量：{{ totalCount }} 份</text>-->
    <!--    </view>-->
  </view>
</template>

<script>
export default {
  name: 'satisfaction',
  data() {
    return {
      // 评价数据
      ratingData: [],
      // 评价等级
      ratingLevels: [
        { label: '非常好', min: 4.5, max: 5.0 },
        { label: '良好', min: 3.5, max: 4.0 },
        { label: '一般', min: 2.5, max: 3.0 },
        { label: '较差', min: 1.5, max: 2.0 },
        { label: '很差', min: 0.5, max: 1.0 },
      ],
      // 订阅消息相关状态
      isWechat: false, // 是否在微信内
      hasSubscribe: false, // 是否已授权订阅消息
      authLoading: false, // 授权按钮加载中
      isWxReady: false, // 微信JS-SDK是否初始化完成
      // 替换为你的订阅消息模板ID（必须与后台一致！）
      templateId: 'KaZZBxSwe0E-YcgragYaKLzwqmZ-WH8ixoS43RhKq9M',
      // JS-SDK配置参数
      jsSdkConfig: {
        appId: '',
        timestamp: '',
        nonceStr: '',
        signature: ''
      },
      openId: ''
    };
  },
  created() {
    // 1. 判断是否在微信内
    // this.isWechat = this.checkIsWechat();
    // console.log(this.isWechat)
    // // 2. 读取本地存储的授权状态（避免重复弹窗）
    // this.hasSubscribe = localStorage.getItem('wechat_subscribe_status') === 'accept';
    // 3. 获取统计数据
    this.getData();
    // 4. 若在微信内，初始化JS-SDK（用于授权）
    // if (this.isWechat) {
    //   this.getId();
    //   this.initWxJsSdk();
    // }
  },
  computed: {
    // 总样本数
    totalCount() {
      return this.ratingData.length;
    },
    // 客服响应效率统计
    efficiencyStats() {
      return this.calculateStats('efficiency');
    },
    // 上门服务态度统计
    attitudeStats() {
      return this.calculateStats('attitude');
    },
    // 员工专业能力统计
    abilityStats() {
      return this.calculateStats('ability');
    },
    // 员工廉洁行为统计
    behaviorStats() {
      return this.calculateStats('behavior');
    }
  },
  methods: {
    getId() {
      var vm = this
      vm.openId = uni.getStorageSync('openId')
      // 没有openId跳转获取code页面
      if (!vm.openId) return vm.func.goto('/pages/getCode/index')
    },
    /**
     * 1. 判断是否在微信浏览器内
     */
    checkIsWechat() {
      const ua = window.navigator.userAgent.toLowerCase();
      return ua.includes('micromessenger') && !ua.includes('miniProgram'); // 排除小程序
    },

    // 新增：动态加载微信JS-SDK脚本，强制覆盖全局wx对象
    loadWxSdkScript() {
      return new Promise((resolve, reject) => {
        // 即使存在wx对象，也强制重新加载官方SDK（解决被覆盖问题）
        const script = document.createElement('script');
        script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'; // 官方地址
        script.type = 'text/javascript';
        script.charset = 'utf-8';
        script.onload = () => {
          console.log('微信JS-SDK加载完成，当前wx对象：', window.wx); // 此时打印应包含config等方法
          // wx-open-subscribe 原生绑定点击事件
          var vm = this;
          vm.$nextTick(() => {
            var btn = vm.$refs.subscribeBtn;
            btn.addEventListener('success', ({detail}) => {
              vm.clickSubscribe(detail)
            });
            btn.addEventListener('error', ({detail}) => {
              vm.clickSubscribe(detail)
            });
          })
          resolve();
        };
        script.onerror = (err) => {
          console.error('微信JS-SDK加载失败', err);
          reject(err);
        };
        document.head.appendChild(script);
      });
    },

    /**
     * 2. 初始化微信JS-SDK（核心：用于调用授权接口）
     */
    // 修改initWxJsSdk方法，先加载SDK再初始化
    async initWxJsSdk() {
      try {
        // 第一步：强制加载微信JS-SDK（关键，覆盖被污染的wx）
        await this.loadWxSdkScript();

        // 第二步：再获取配置参数（原有逻辑）
        const currentUrl = encodeURIComponent(window.location.href.split('#')[0]);
        const res = await this.tui.request(
            `/api/wx/getJsSdkConfig?url=${currentUrl}`,
            'get',
            {},
            false,
            false,
            true
        );

        if (res.code === 200) {
          this.jsSdkConfig = res.data[0];
          this.configWxSdk(); // 此时wx应为官方对象
        } else {
          throw new Error('获取JS-SDK配置失败');
        }
      } catch (err) {
        console.error('JS-SDK初始化失败：', err);
        this.tui.toast('授权功能异常，请稍后重试');
      }
    },

    /**
     * 3. 配置微信JS-SDK
     */
    configWxSdk() {
      const wx = window.wx;
      if (!wx) {
        console.error('微信JS-SDK未加载');
        return;
      }
      console.log(JSON.stringify(wx))
      wx.config({
        debug: true, // 调试模式：true会弹出接口调用结果
        appId: this.jsSdkConfig.appId, // 公众号APPID
        timestamp: this.jsSdkConfig.timestamp, // 时间戳
        nonceStr: this.jsSdkConfig.nonceStr, // 随机字符串
        signature: this.jsSdkConfig.signature, // 签名
        jsApiList: ['requestSubscribeMessage'] // 需使用的接口（订阅消息授权）
      });

      // JS-SDK初始化成功回调
      wx.ready(() => {
        console.log('微信JS-SDK初始化完成');
        this.isWxReady = true;
        // 可选：验证授权状态（后端接口，可选）
        // this.checkSubscribeStatus();
      });

      // JS-SDK初始化失败回调
      wx.error((err) => {
        console.error('微信JS-SDK配置失败：', err);
        this.tui.toast('授权功能异常，请刷新页面重试');
      });
    },

    /**
     * 4. 检查用户是否已授权（后端验证，更准确）
     */
    async checkSubscribeStatus() {
      try {
        const res = await this.tui.request(
            '/api/wx/checkSubscribeStatus',
            'post',
            {
              "openid":this.openId,
              "templateId": this.templateId
            },
            false,
            false,
            true
        );
        // 后端返回是否已授权（true/false）
        this.hasSubscribe = res.data[0].isSubscribed;
        // 存储到本地，下次进入不重复查询
        localStorage.setItem('wechat_subscribe_status', this.hasSubscribe ? 'accept' : 'refuse');
      } catch (err) {
        console.error('查询授权状态失败：', err);
      }
    },

    /**
     * 5. 用户点击：触发订阅消息授权弹窗
     */
    handleSubscribeAuth() {
      var vm = this
      vm.func.goto('/pages/satisfaction/index')
    },

    // 原有方法：获取统计数据
    getData() {
      this.tui.request('/api/service-evaluation/all', 'get', {}, false, false, true).then((res) => {
        if (res && res.length > 0) {
          this.ratingData = res;
        }
      });
    },

    // 原有方法：计算统计数据
    calculateStats(field) {
      if (this.totalCount === 0) {
        return this.ratingLevels.map(level => ({
          label: level.label,
          count: 0,
          percentage: 0
        }));
      }

      const counts = this.ratingLevels.map(level => {
        const count = this.ratingData.filter(item =>
            item[field] >= level.min && item[field] <= level.max
        ).length;

        return {
          label: level.label,
          count,
          percentage: Math.round((count / this.totalCount) * 100)
        };
      });

      return counts;
    },

    // 原有方法：获取柱状图颜色
    getBarColor(index) {
      const colors = [
        '#4CD964',  // 非常好 - 绿色
        '#007AFF',   // 良好 - 蓝色
        '#FFCC00',  // 一般 - 黄色
        '#FF9500',  // 较差 - 橙色
        '#FF3B30',  // 很差 - 红色
      ];
      return colors[index];
    },

    // 原有方法：获取进度条宽度
    getBarWidth(count) {
      if (this.totalCount === 0) return 0;
      return Math.min(Math.round((count / this.totalCount) * 100), 100);
    },

  }
};
</script>

<style scoped>
/* 原有样式不变，新增授权按钮样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 20rpx;
}

/* 授权按钮容器 */
.auth-btn-container {
  margin-bottom: 20rpx;
  padding: 0 20rpx;
}

/* 授权按钮样式 */
.auth-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007AFF;
  color: #fff;
  font-size: 30rpx;
  border-radius: 40rpx;
  border: none;
}

.auth-btn::after {
  border: none;
}

/* 原有样式保持不变 */
.title-section {
  text-align: center;
  padding: 40rpx 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.main-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.sub-title {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.stats-container {
  flex: 1;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}

.stats-item {
  margin-bottom: 40rpx;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #eee;
}

.stats-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.stats-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.chart-container {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.chart-bar-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  height: 50rpx;
}

.bar-label {
  width: 120rpx;
  text-align: right;
}

.label-text {
  font-size: 26rpx;
  color: #666;
}

.bar-wrapper {
  flex: 1;
  height: 24rpx;
  background-color: #EEEEEE;
  border-radius: 12rpx;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 12rpx;
  transition: width 0.5s ease;
}

.bar-percentage {
  width: 80rpx;
  text-align: left;
}

.percentage-text {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.summary-info {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.openWx {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.summary-text {
  font-size: 28rpx;
  color: #666;
}
</style>